import Modal from '@/components/modal'
import styles from './modal.module.less'
import CheckBox from '@/components/checkbox'
import Input from '@/components/input'
import { useSetState } from 'ahooks'
import Button from '@/components/button'
import { applyRole } from '@/api/user'
import { pick } from 'lodash-es'
import Toast from '@/components/toast'

const societyGroup = [
  {
    id: 1,
    name: '社交媒体',
  },
  {
    id: 2,
    name: '社群群组',
  },
  {
    id: 3,
    name: '网站',
  },
  {
    id: 4,
    name: '自研应用软件',
  },
  {
    id: 5,
    name: '其他',
  },
]

const Index = (props) => {
  const { role, close } = props
  const [formInfo, setFormInfo] = useSetState({
    step: 1,
    marketingModes: [],
    societyError: false,
    contractError: false,
  })

  //多选处理
  const handleSociety = (data) => {
    let oldData = [...formInfo.marketingModes]

    if (data.checked) {
      oldData.push(data.value)
    } else {
      oldData = oldData.filter((item) => item !== data.value)
    }
    setFormInfo({ marketingModes: oldData })
  }

  const isStepPass = () => {
    if (!formInfo.marketingModes.length || !formInfo.marketingSites || !formInfo.flowDesc) {
      setFormInfo({
        societyError: !formInfo.marketingModes.length,
        websiteErr: !formInfo.marketingSites,
        flowErr: !formInfo.flowDesc,
        step: 2,
      })
      return false
    }
    return true
  }
  const onSubmit = async () => {
    if (!isStepPass()) {
      return
    }
    const res = await applyRole({
      actorId: role.id,
      ...pick(formInfo, ['marketingModes', 'marketingSites', 'flowDesc']),
    })
    if (!res.code) {
      Toast.normal('角色申请成功')
      setTimeout(() => {
        window.location.replace('/market-center')
      }, 1000)
    }
  }

  return (
    <Modal visible={props.visible}>
      <div className={styles.applyContent}>
        <img src="/images/close.webp" alt="" className={styles.close} onClick={close} />
        <p className={styles.title}>申请联盟营销</p>
        <p className={styles.stepTitle}>
          <span className="text-red mr-1">*</span>
          <span>
            您是通过什么方式进行营销的? {'（'}可多选{'）'}
          </span>
          {formInfo.societyError && <span className={styles.error}>请至少选择一项</span>}
        </p>
        <div className={styles.checks}>
          {societyGroup.map((item) => {
            return (
              <CheckBox
                defaultChecked={formInfo.marketingModes.includes(item.name)}
                key={item.id}
                className={styles.space}
                value={item.name}
                name="marketingModes"
                bg="var(--theme-color)"
                onChange={handleSociety}
              >
                {item.name}
              </CheckBox>
            )
          })}
        </div>
        <p className={styles.stepTitle}>
          <span className="text-red mr-1">*</span>
          <span>请列出您的所选营销方式的网址</span>
          {formInfo.websiteErr && <span className={styles.error}>请输入</span>}
        </p>
        <Input
          inputClass="input"
          defaultValue={formInfo.marketingSites}
          onChange={(e) => setFormInfo({ marketingSites: e.currentTarget.value })}
          textarea
          placeholder="请在此输入您所有推广方式的网址"
        />
        <p className={styles.stepTitle}>
          <span className="text-red mr-1">*</span>
          <span>请简要描述您的流量类型</span>
          {formInfo.flowErr && <span className={styles.error}>请输入</span>}
        </p>
        <Input
          inputClass="input"
          defaultValue={formInfo.flowDesc}
          onChange={(e) => setFormInfo({ flowDesc: e.currentTarget.value })}
          textarea
          placeholder="请简要描述您的流量类型，如自然搜索、社交分享等"
        />
        <Button className={styles.submit} onClick={onSubmit}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

export default Index
